import { v4 as uuidv4 } from 'uuid'

//左边可拖拽组件区域
export const componentList = ref([
  {
    id: uuidv4(),
    fieldName: '',
    label: '输入框',
    value: '',
    component: '',
    componentName: 'CustomInput',
    $attrs: {},
    option: []
  },
  {
    id: uuidv4(),
    fieldName: '',
    label: '单选框',
    value: '',
    component: '',
    componentName: 'CustomRadio',
    $attrs: {},
    option: []
  },
  {
    id: uuidv4(),
    fieldName: '',
    label: '多选框',
    value: '',
    component: '',
    componentName: 'CustomCheckbox',
    $attrs: {},
    option: []
  },
  {
    id: uuidv4(),
    fieldName: '',
    label: '日期选择器',
    value: '',
    component: '',
    componentName: 'CustomDatePicker',
    $attrs: {},
    option: []
  },
  {
    id: uuidv4(),
    fieldName: '',
    label: '选择器',
    value: '',
    component: '',
    componentName: 'CustomSelect',
    $attrs: {},
    option: []
  },
  {
    id: uuidv4(),
    fieldName: '',
    label: '文件上传',
    value: '',
    component: '',
    componentName: 'CustomFile',
    $attrs: {},
    option: []
  },


])


//定制组件选项列表
export const CustomizeOptionsList = {
  // 多选框
  CustomCheckbox: [
    {
      name: '标签名称',
      nameEn: 'label',
      value: '',
      component: 'el-input',
      required: true,
      $attrs: {
        placeholder: '请输入左侧标签名称'
      }
    },
    {
      name: '字段名',
      nameEn: 'fieldName',
      value: '',
      component: 'el-input',
      required: true,
      $attrs: {
        placeholder: '请输入数据库对应的字段名'
      }
    },
    {
      name: '多选框数量',
      nameEn: 'size',
      value: 1,
      component: 'el-input-number',
      $attrs: {
        min: 1,
        max: 10
      }
    },
    {
      name: '多选框名称',
      nameEn: 'checkboxName',
      value: [''],
      required: true,
      component: '',
      $attrs: {
        size: 1
      }
    },
    {
      name: '是否必选',
      nameEn: 'required',
      value: false,
      component: 'el-switch',
      $attrs: {
        size: 'large',
        'inline-prompt': true,
        'active-text': '是',
        'inactive-text': '否'
      }
    }
  ],
  // 单选框
  CustomRadio: [
    {
      name: '标签名称',
      nameEn: 'label',
      value: '',
      component: 'el-input',
      required: true,
      $attrs: {
        placeholder: '请输入左侧标签名称'
      }
    },
    {
      name: '字段名',
      nameEn: 'fieldName',
      value: '',
      component: 'el-input',
      required: true,
      $attrs: {
        placeholder: '请输入数据库对应的字段名'
      }
    },
    {
      name: '单选框数量',
      nameEn: 'size',
      value: 2,
      component: 'el-input-number',
      $attrs: {
        min: 2,
        max: 4
      }
    },
    {
      name: '单选框名称',
      nameEn: 'radioName',
      value: ['', ''],
      required: true,
      component: '',
      $attrs: {
        size: 2
      }
    },
    {
      name: '是否必选',
      nameEn: 'required',
      value: false,
      component: 'el-switch',
      $attrs: {
        size: 'large',
        'inline-prompt': true,
        'active-text': '是',
        'inactive-text': '否'
      }
    }
  ],
  //日期选择器
  CustomDatePicker: [
    {
      name: '标签名称',
      nameEn: 'label',
      value: '',
      component: 'el-input',
      required: true,
      $attrs: {
        placeholder: '请输入左侧标签名称'
      }
    },
    {
      name: '字段名',
      nameEn: 'fieldName',
      value: '',
      component: 'el-input',
      required: true,
      $attrs: {
        placeholder: '请输入数据库对应的字段名'
      }
    },
    {
      name: '类型',
      nameEn: 'type',
      value: 'date',
      component: '',
      required: true,
      $attrs: {
        placeholder: '请选择选择器类型',
        optionList: [
          {
            value: 'date',
            label: '日期选择器'
          },
          {
            value: 'time',
            label: '时间选择器'
          },
          {
            value: 'dateTime',
            label: '日期时间选择器'
          }
        ]
      }
    },
    {
      name: '是否选择范围',
      nameEn: 'range',
      value: false,
      component: 'el-switch',
      $attrs: {
        size: 'large',
        'inline-prompt': true,
        'active-text': '是',
        'inactive-text': '否'
      }
    }
  ],
  //输入框
  CustomInput: [
    {
      name: '标签名称',
      nameEn: 'label',
      value: '',
      component: 'el-input',
      required: true,
      $attrs: {
        placeholder: '请输入左侧标签名称'
      }
    },
    {
      name: '字段名',
      nameEn: 'fieldName',
      value: '',
      component: 'el-input',
      required: true,
      $attrs: {
        placeholder: '请输入数据库对应的字段名'
      }
    },
    {
      name: '类型',
      nameEn: 'type',
      value: '',
      component: '',
      required: true,
      $attrs: {
        placeholder: '请选择输入框类型',
        optionList: [
          {
            value: 'text',
            label: '文本'
          },
          {
            value: 'textarea',
            label: '文本域'
          },
          {
            value: 'email',
            label: '邮箱'
          },
          {
            value: 'tel',
            label: '电话号码'
          },
          {
            value: 'number',
            label: '数字'
          },
          {
            value: 'password',
            label: '密码'
          }
        ]
      }
    },
    {
      name: '输入框提示语',
      nameEn: 'placeholder',
      value: '',
      component: 'el-input',
      required: true,
      $attrs: {
        placeholder: '请输入提示语'
      }
    },
    {
      name: '是否长度限制',
      nameEn: 'LengthLimit',
      value: {
        isShowLengthLimit: 'false',
        min: 0,
        max: 100
      },
      component: '',
      required: true,
      $attrs: {
        disabled: true
      }
    },

    // {
    //   name: '是否展示长度',
    //   nameEn: 'isShowLength',
    //   value: false,
    //   component: 'el-switch',
    //   $attrs: {
    //     size: 'large',
    //     'inline-prompt': true,
    //     'active-text': '是',
    //     'inactive-text': '否'
    //   }
    // },

    {
      name: '是否必填',
      nameEn: 'required',
      value: false,
      component: 'el-switch',
      $attrs: {
        size: 'large',
        'inline-prompt': true,
        'active-text': '是',
        'inactive-text': '否'
      }
    }
  ],
  //选择器
  CustomSelect: [
    {
      name: '标签名称',
      nameEn: 'label',
      value: '',
      component: 'el-input',
      required: true,
      $attrs: {
        placeholder: '请输入左侧标签名称'
      }
    },
    {
      name: '字段名',
      nameEn: 'fieldName',
      value: '',
      component: 'el-input',
      required: true,
      $attrs: {
        placeholder: '请输入数据库对应的字段名'
      }
    },
    {
      name: '下拉框类型',
      nameEn: 'type',
      value: '',
      required: true,
      component: '',
      $attrs: {
        placeholder: '请选择选择器类型',
        optionList: [
          {
            value: 'customize',
            label: '自定义'
          },
          {
            value: 'province',
            label: '省份'
          },
          {
            value: 'city',
            label: '城市'
          },
          {
            value: 'country',
            label: '国家'
          },
        ]
      }
    },
    {
      name: '输入框提示语',
      nameEn: 'placeholder',
      value: '',
      component: 'el-input',
      required: true,
      $attrs: {
        placeholder: '请输入提示语'
      }
    },
    {
      name: '是否多选',
      nameEn: 'isMultiple',
      value: false,
      component: 'el-switch',
      $attrs: {
        size: 'large',
        'inline-prompt': true,
        'active-text': '是',
        'inactive-text': '否'
      }
    },
    {
      name: '是否必选',
      nameEn: 'required',
      value: false,
      component: 'el-switch',
      $attrs: {
        size: 'large',
        'inline-prompt': true,
        'active-text': '是',
        'inactive-text': '否'
      }
    }
    // {
    //   name: '选项内容',
    //   nameEn: 'optionsInfo',
    //   value: '',
    //   component: '',
    //   required: true,
    //   $attrs: {}
    // },
  ],
  //文件上传
  CustomFile: [
    {
      name: '标签名称',
      nameEn: 'label',
      value: '',
      component: 'el-input',
      required: true,
      $attrs: {
        placeholder: '请输入左侧标签名称'
      }
    },
    {
      name: '字段名',
      nameEn: 'fieldName',
      value: '',
      component: 'el-input',
      required: true,
      $attrs: {
        placeholder: '请输入数据库对应的字段名'
      }
    },
    {
      name: '允许上传文件个数',
      nameEn: 'limit',
      value: 1,
      component: 'el-input-number',
      required: true,
      $attrs: {
        min: 1,
        max: 10,
        step: 1,
        'step-strictly': true
      }
    },
    {
      name: '文件上传类型',
      nameEn: 'fileType',
      value: [],
      component: '',
      required: true,
      $attrs: {
        label: '文件上传类型',
        labelList: ['doc', 'docx', 'xls', 'xlsx', 'xml', 'pdf']
      }
    },
    {
      name: '是否必上传',
      nameEn: 'required',
      value: false,
      component: 'el-switch',
      $attrs: {
        size: 'large',
        'inline-prompt': true,
        'active-text': '是',
        'inactive-text': '否'
      }
    }

  ]

}



const EnglishReg = /^[a-zA-Z]+$/

// 校验表单
export const ruleList = {
  // 多选框
  CustomCheckbox: {
    label: [{ required: true, message: '请输入左侧标签名称', trigger: 'blur' }],
    fieldName: [{
      required: true,
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入数据库对应的字段名！'))
        } else if (!EnglishReg.test(value)) {
          callback(new Error('只能输入英文！（建议使用驼峰命名法）'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }],
    size: [{ required: true, message: '多选框数量至少为1', trigger: 'blur' }],
    checkboxName: [
      {
        required: true,
        validator: (rule, value, callback) => {
          if (!value || value.some(item => !item)) {
            callback(new Error('输入全部多选框名称或删除减少多选框数量!'))
          } else {
            callback()
          }
        },
        trigger: 'blur'
      }
    ]
  },
  //单选框
  CustomRadio: {
    label: [{ required: true, message: '请输入左侧标签名称', trigger: 'blur' }],
    fieldName: [{
      required: true,
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入数据库对应的字段名！'))
        } else if (!EnglishReg.test(value)) {
          callback(new Error('只能输入英文！（建议使用驼峰命名法）'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }],
    size: [{ required: true, message: '单选框数量应在2-4之间,数量大于4请选择多选框', trigger: 'blur' }],
    radioName: [
      {
        required: true,
        validator: (rule, value, callback) => {

          if (!value || value.some(item => !item.trim())) {
            callback(new Error('输入全部单选框名称或删除减少单选框数量!'))
          } else {
            callback()
          }
        },
        trigger: 'blur'
      }
    ]
  },
  //日期选择器
  CustomDatePicker: {
    label: [{ required: true, message: '请输入左侧标签名称', trigger: 'blur' }],
    fieldName: [{
      required: true,
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入数据库对应的字段名！'))
        } else if (!EnglishReg.test(value)) {
          callback(new Error('只能输入英文！（建议使用驼峰命名法）'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }],
    type: [{ required: true, message: '请选择日期选择器类型', trigger: 'blur' }]
  },
  //输入框
  CustomInput: {
    label: [{ required: true, message: '请输入左侧标签名称', trigger: 'blur' }],
    fieldName: [{
      required: true,
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入数据库对应的字段名！'))
        } else if (!EnglishReg.test(value)) {
          callback(new Error('只能输入英文！（建议使用驼峰命名法）'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }],
    type: [{ required: true, message: '请选择输入框类型', trigger: 'blur' }]
  },
  //选择器
  CustomSelect: {
    label: [{ required: true, message: '请输入左侧标签名称', trigger: 'blur' }],
    fieldName: [{
      required: true,
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入数据库对应的字段名！'))
        } else if (!EnglishReg.test(value)) {
          callback(new Error('只能输入英文！（建议使用驼峰命名法）'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }],
    type: [{ required: true, message: '请选择选择器类型', trigger: 'blur' }],
    // optionsInfo: [{ required: true, message: '请输入自定义选项内容!', trigger: 'blur' }]
  },
  //文件上传
  CustomFile: {
    label: [{ required: true, message: '请输入左侧标签名称', trigger: 'blur' }],
    fieldName: [{
      required: true,
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入数据库对应的字段名！'))
        } else if (!EnglishReg.test(value)) {
          callback(new Error('只能输入英文！（建议使用驼峰命名法）'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }],
    fileType: [{
      required: true,
      validator: (rule, value, callback) => {
        if (!value.length) {
          callback(new Error('请勾选文件类型！'))
        } else {
          callback()
        }
      }, message: '请勾选允许上传文件类型', trigger: 'change'
    }],
    limit: [{ required: true, message: '请输入文件个数', trigger: 'blur' }]
  }


}
